<template>
      <lib-doc :libDocData="libDocData"></lib-doc>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'
import LibDoc from '@/components/LibDoc.vue'
import { LibDocInterface } from '@/service/LibDocService'
export default defineComponent({
    name: 'i_from_demo',
    setup () {
        const libDocData: LibDocInterface = {
            title: '自定义表单组件',
            docList: [
                {
                    label: '引入组件',
                    value: "import { ITabs } from 'wd-platform-library'"
                },
                {
                    label: '创建表单对象',
                    type: 'pre',
                    value: `
const tabsOption:TabsInterface = reactive({
            list: [],//数据集合 格式:{label:'',value:'',.....}
            options:{}//antdv的配置对象
}) `
                },
                {
                    label: '选择回调',
                    type: 'pre',
                    value: `
  <ITabs :tabsOption="tabsOption" @changTab="changeTabFun"></ITabs> 
  const changeTabFun = (data: {label:string;value:string}) => {
            changeTabData.value = data
            alert('我选择了' + JSON.stringify(data))
        }    
                    `

                },
                {
                    label: '说明',
                    type: 'pre',
                    value: `
  tabsOption.list 填充数据后会默认返回第一个 
  注意数据格式 {label:'',value:'',.....}     
                    `

                }
            ]
        }
        return {
            libDocData
        }
    },
    methods: {},
    components: { LibDoc }
})
</script>
